<template>
  <!-- 影院详情 -->
  <div class="DetailView">
    <div class="top-nav" v-if="cdList">
      <div class="out" @click="goOff()">
        <van-icon name="arrow-left" />
      </div>
      {{ cdList.nm }}
      <div class="out"></div>
    </div>
    <!-- 头部 -->
    <div class="top-nm" v-if="cdList">
      <h4>
        {{ cdList.nm }}
      </h4>
      <h5>{{ cdList.addr }}</h5>
    </div>

    <!-- 轮播 -->
    <div class="whirligig" v-if="showslist">
      <!-- 轮播图片 -->
      <div
        class="imglunbo"
        @touchmove="touchmove"
        @touchend="touchend()"
        @touchstart="touchstart"
      >
        <div
          class="bg"
          :style="{ backgroundImage: `url(${showslist[imgindex].img})` }"
        ></div>
        <div class="zezao"></div>
        <ul
          class="imgul"
          :style="{
            transitionDuration: `${trantime}ms`,
            transform: `translateX(${moveX}px)`,
          }"
        >
          <li
            class="imgli"
            :class="{ active: index == imgindex }"
            v-for="(item, index) in showslist"
            :key="item.id"
            @click.stop="getShow(item, index)"
            ref="imgli"
          >
            <div
              class="img"
              :style="{ backgroundImage: `url(${item.img})` }"
            ></div>
          </li>
        </ul>
      </div>
      <!-- <ul class="pc-list" v-if="showslist">
        <li class="pc-list-li" v-for="movie in showslist" :key="movie.id">
          <img :src="movie.img" @click="getShow(movie)" />
        </li>
      </ul> -->

      <!-- 标题名字 -->
      <div class="movie-info-container">
        <div class="nmtitle">
          <div class="movie-title">
            {{ showitem.nm }}
            <span class="grade" v-if="showitem.sc != 0.0"
              >{{ showitem.sc }}分</span
            >
            <span class="grade" v-else>{{ showitem.wish }}想看</span>
          </div>
          <div class="movie-desc">{{ showitem.desc }}</div>
        </div>
      </div>
    </div>

    <!-- 日期 -->
    <div class="date" v-if="dateList">
      <van-tabs @click="onClickDate">
        <van-tab
          class="date-time"
          v-for="date in dateList"
          :title="date.date"
          :key="date.date"
        >
          <!-- 开卡折扣 -->
          <div class="discount" v-if="cdList">
            <div class="left">折扣</div>
            <div class="con">现在开卡，{{ cdList.vipInfo.desc }}</div>
            <div class="right">
              <span> 9.9元起开卡</span> <van-icon name="arrow" />
            </div>
          </div>
          <!-- 购票列表 -->
          <ul class="list" v-if="plistList.length >= 1">
            <router-link
              tag="li"
              :to="{
                path: `/seat/${cinemaId}`,
                query: { plistlist: showitem.shows, nmtitle: showitem.shows },
              }"
              v-for="item in showitem.shows"
              :key="item.seqNo"
            >
              <div class="left">
                <p>{{ item.tm }}</p>
                <div>12:13散场</div>
              </div>
              <div class="con">
                <h4>{{ item.lang }}{{ item.tp }}</h4>
                <p>{{ item.th }}</p>
              </div>
              <div class="fen">
                <div class="price">
                  <span>￥</span>
                  <span style="font-size: 19px">{{ item.baseSellPrice }} </span>
                  <div class="vipPrice">
                    <span class="icon">{{ item.vipPriceName }}</span>
                    <span class="num">￥{{ item.vipPrice }}</span>
                  </div>
                </div>
                <p class="extraDesc">{{ item.extraDesc }}</p>
              </div>

              <div class="right">
                <button>购票</button>
              </div>
            </router-link>
          </ul>

          <ul class="list" v-else>
            <li class="no">
              <div class="no-icon"><img src="@/assets/over.png" /></div>
              <div class="text">今日场次已映完</div>
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cdList: null, // 详情数据
      showslist: null, // 上映电影数据
      // 日期
      dateList: [],
      // 存放购票列表
      plistList: [],
      // 存放名字
      // nmTitle: {
      //   nm: "", // 名字
      //   desc: "", // 介绍
      //   sc: 0, // 评分
      //   wish: 1, // 想看
      // },
      timeMovie: null,

      // 轮播
      imgindex: 0,
      trantime: 0,
      moveX: 137.5,
      moveXstart: 137.5,
      movestart: 0,
      moveend: 0,
      imgliwidth: 0,
    };
  },
  props: {
    cinemaId: {
      type: String,
      default: "0",
    },
  },
  methods: {
    goOff() {
      this.$router.go(-1);
    },
    //  点击电影传进来
    getShow(movie, index) {
      this.imgindex = index;
      this.timeMovie = movie.shows;
      // console.log(movie.shows[0].plist);
      // this.nmTitle = {
      //   nm: movie.nm, // 名字
      //   desc: movie.desc, // 介绍
      //   sc: movie.sc, // 评分
      //   wish: movie.wish, // 想看
      // };
      this.plistList = movie.shows[0].plist;
      console.log(this.plistList);
    },

    // 影院详情
    getDatail() {
      this.axios.get("cinema/detail?cinemaId=" + this.cinemaId).then((re) => {
        // console.log(re);
        this.cdList = re;
      });
    },
    // 影院正在上映电影列表
    getNowShow() {
      this.axios.get("cinema/shows?cinemaId=" + this.cinemaId).then((res) => {
        console.log("电影列表", res);
        this.showslist = res.movies;
        // // 标题
        this.showitem = this.showslist[0];
        // // 列表
        // this.plistList = this.showslist[0].shows[0].plist;
        // console.log(this.plistList);
        this.timeMovie = this.showslist[0].shows;
      });
    },
    // 获取影片上映日期
    getShowDays() {
      this.axios.get("movie/showdays?movieId=1356218&cityId=1").then((re) => {
        // console.log(re.dates);
        // this.dateList = re.dates;
        this.dateList = re.dates.map((item) => {
          let M = item.date.slice(5, 7);
          let d = item.date.slice(8, 10);
          item.date = M + "月" + d + "日";
          // console.log(item.date);
          return item;
        });
      });
    },

    // 轮播
    touchstart(e) {
      this.movestart = this.moveX - e.touches[0].clientX;
    },
    touchmove(e) {
      this.moveX = e.touches[0].clientX + this.movestart;
    },
    touchend(v) {
      if (v) {
        this.trantime = 1500;
      } else {
        this.trantime = 300;
      }
      setTimeout(() => {
        this.trantime = 0;
      }, this.trantime);
      if (this.imgliwidth == 0) {
        this.imgliwidth = this.$refs.imgli[1].offsetWidth + 15;
      }
      let index = Math.round((this.moveXstart - this.moveX) / this.imgliwidth);
      if (index > this.showslist.length - 1) {
        this.imgindex = this.showslist.length - 1;
      } else if (index <= 0) {
        this.imgindex = 0;
      } else {
        this.imgindex = index;
      }
      if (v) {
        this.imgindex = v;
      } else {
        this.moveX = this.moveXstart - this.imgindex * this.imgliwidth;
      }
    },

    // 切换日期
    onClickDate(index, title) {
      console.log(index, title, this.timeMovie);
      this.plistList = this.timeMovie[index].plist;
    },
  },
  created() {
    this.getDatail();
    this.getNowShow();
    this.getShowDays();
  },
  // 计算属性
  computed: {
    showitem() {
      return this.showslist[this.imgindex];
    },
  },
};
</script>

<style lang="scss" scoped>
.DetailView {
  // 标题
  .top-nav {
    height: 50px;
    color: #fff;
    background: #3c9fe6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    .out {
      width: 50px;
      height: 50px;
      font-size: 32px;
      line-height: 50px;
      padding-left: 5px;
    }
  }

  // 头部
  .top-nm {
    height: 53px;
    padding: 24px 0 0 20px;
    h4 {
      font-weight: 700;
      font-size: 17px;
      color: #333;
      margin-bottom: 5px;
    }
    h5 {
      font-size: 13px;
      color: #999;
    }
  }

  // 轮播
  .whirligig {
    .pc-list {
      overflow-x: auto;
      display: flex;
      .pc-list-li {
        margin-right: 10px;
        img {
          width: 75px;
          height: 110px;
        }
      }
    }
    // 轮播图片
    .imglunbo {
      position: relative;
      overflow: hidden;
      z-index: 1;
      padding: 20px 15px 20px 5px;
      .bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-size: contain;
        filter: blur(30px);
        background-position-y: 40%;
        overflow: hidden;
        z-index: -1;
      }
      .zezao {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #40454d;
        opacity: 0.55;
      }
      .imgul {
        position: relative;
        width: 100%;
        height: 95px;
        z-index: 1;
        display: flex;
        transition-property: transform;
        box-sizing: initial;
        .imgli {
          width: 65px;
          height: 95px;
          margin-left: 15px;
          box-sizing: initial;
          flex-shrink: 0;
          position: relative;
          transition-property: transform;
          &:nth-child(1) {
            margin-left: 10px;
          }
          .img {
            background-color: #f5f5f5;
            // opacity: 0;
            background-size: cover;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
            animation: imageanimation 1s forwards;
          }
        }
        .active {
          transform: scale(1.15);
          border: 2px solid #fff;
          &::after {
            content: "";
            width: 0;
            height: 0;
            display: block;
            position: absolute;
            border: 5px solid transparent;
            border-top-color: #fff;
            left: 50%;
            transform: translateX(-50%);
            bottom: -11px;
          }
        }
      }
    }

    .movie-info-container {
      height: 66.5px;
      background-color: #fff;
      .nmtitle {
        padding: 11px 15px;
        text-align: center;
        .movie-title {
          height: 24px;
          line-height: 24px;
          font-size: 17px;
          color: #333;
          font-weight: 700;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          .grade {
            color: #ffb400;
            font-size: 16px;
          }
        }
      }
      .movie-desc {
        margin-top: 2px;
        height: 18.5px;
        line-height: 18.5px;
        font-size: 13px;
        color: #999;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }

  // 日期
  .date {
    .date-time {
      font-size: 12px;
    }
    // 打折
    .discount {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      font-size: 12px;
      background-color: #fff5ea;
      height: 40px;
      .left {
        background-color: #ff941a;
        color: #fff;
        padding: 3px 5px;
        margin-right: -10px;
      }
      .con {
        color: #fa9600;
      }

      .right {
        color: #999;
      }
    }
    // 场次
    .list {
      li {
        padding: 17px 12.5px;
        display: flex;
        color: #333;
        .left {
          width: 55px;
          height: 55px;
          font-size: 20px;

          text-align: center;
          div {
            margin-top: 5px;
            font-size: 12px;
            color: #999;
          }
        }
        .con {
          width: 97px;
          height: 55px;
          margin-left: 15px;
          h4 {
            font-size: 13px;
            margin-bottom: 10px;
          }
          p {
            color: #999;
            font-size: 12px;
          }
        }
        .fen {
          flex: 1;
          padding-left: 10px;
          color: #f03d37;
          font-weight: 500;
          font-size: 19px;
          span {
            font-size: 11px;
            font-weight: 400;
          }
          .price {
            .vipPrice {
              display: inline-block;
              line-height: 15px;
              height: 15px;
              -webkit-transform: scale(0.8);
              transform: scale(0.8);
              -webkit-transform-origin: left;
              transform-origin: left;
              margin-right: -16px;
              border: 1px solid #ff9000;
              border-radius: 2px;
              font-size: 12px;
              .icon {
                display: inline-block;
                color: #fff;
                background-color: #f90;
              }
              .num {
                display: inline-block;
                padding: 0 2px;
                color: #f90;
                background-color: #fff;
              }
            }
          }
          .extraDesc {
            margin-top: 5px;
            display: block;
            font-size: 11px;
            color: #999;
          }
        }
        .right {
          width: 50px;
          height: 55px;
          button {
            width: 100%;
            border: none;
            background: none;
            border: 1px solid #f06762;
            border-radius: 50px;
            padding: 5px 5px;

            color: #f03d37;
            font-size: 12px;
          }
        }
      }
      .no {
        display: block;
        text-align: center;
        .no-icon {
          margin: 50px auto 0;
          width: 77.5px;
          height: 71.5px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          margin-top: 12px;
          line-height: 1;
          font-size: 16px;
          color: #acacac;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.van-tab__text {
  font-size: 12px;
}
</style>